<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js项目列表的增删和移动</title>
		
	</head>
	<body>
		<form action="" method="">  
			<div class="list">
				<ul class="list-ul">
					<li class="list-option">
						<input type="text" class="list-input" name="list[]" id="" value="" />
						<span class="list-btn">
							<button class="list-up"> [上移]</button>
							<button class="list-down"> [下移]</button>
							<button class="list-del"> [删除]</button>
						</span>
					</li>
				</ul>
				<div class="list-bottom" id="">
					<span class="list-add-show">添加项目</span>
					<div class="list-add-area list-hide">
						添加到列表
						<input type="text" class="list-add-input" name="list[]" id="list[]" value="" />
						<input type="button" class="list-add-add"  value="添加" />
						<input class="list-add-cancel" type="button" value="取消" />
						
					</div>
				</div>
			</div>
		</form>
	<script type="text/javascript">
			(function(window) {
				var SmartList = function(prefix, defList) {
					Find.prototype.prefix = prefix;
					var find = new Find(document.getElementsByClassName(prefix)[0]); // 获取对象
					var list = new List(find.className('option'));
					for (var i in defList) {
						list.add(defList[i]);
					}
					
					var add = {
						'show':find.className('add-show'),	
						'area':find.className('add-area'),	
						'input':find.className('add-input'),	
						'add':find.className('add-add'),	
						'cancel':find.className('add-cancel')	
					};
					add.show.onclick = function() {	
						add.area.classList.remove(prefix + '-hide');
					};
					add.add.onclick = function()  {	
						list.add(add.input.value);
						
					};
					add.cancel.onclick =  function() {		
						add.area.classList.add(prefix + '-hide');
					};
				};
				function Find(obj) {
					this.obj = obj;
				}
				Find.prototype = {
					prefix: '', //待查找的前缀
					className: function(className) {
						return this.obj.getElementsByClassName(this.prefix + '-' + className)[0];
					},
					prev: function() {
						var node = this.obj.previousSibling; //	获取当前元素对象的前一个节点
						while (node) {
							if (node.nodeType === Node.ELEMENT_NODE) {
								break;
							}
							node = node.previousSibling;
						}
						return node;
					},
			 
					next: function() {
						var node = this.obj.nextElementSibling; //获取当前元素对象的后一个节点
						while (node) {
							if (node.nodeType === Node.ELEMENT_NODE) {
								break;
							}
							node = node.nextElementSibling;
						}
						return node;
					}
				}
				function List(tmp) { // List构造函数 参数tmp表示操作的<li>元素模板
					this.tmp = tmp;
					this.obj = tmp.parentNode; // 保存模板的父节点对象
					this.obj.removeChild(tmp); //从<ul>中移除<li>模板
				}
				List.prototype = {
					add: function(value) {
						var tmp = this.tmp.cloneNode(true); //克隆一个元素节点
						var find = new Find(tmp);
						find.className('input').value = value;
						var obj = this.obj; //获取ul元素对象
						find.className('up').onclick = function() { //添加上移单击事件
							var prev = find.prev(); //获取前一个节点
							if (prev) {
								obj.insertBefore(tmp, prev); //在prev前插入tmp
							} else {
								alert('这已经是第一张了');
							}
						};
						find.className('down').onclick = function() { 
							var last = find.next(); 
							if (last) {
								obj.insertBefore(next, tmp); 
							} else {
								alert('这已经是最后一张了');
							}
						};
						find.className('del').onclick = function() { 
							if (confirm('你确定要删除吗？')) {
								obj.removeChild(tmp);
							}
						}
						this.obj.appendChild(tmp);
					}
			 
				};
				window['SmartList'] = SmartList;
			})(window);
			SmartList('list', ['java', 'java2']);  //添加默认项目
		</script>
			
	</body>
</html>
